<script setup>
import { nextTick, ref } from "vue";
import { poster } from "@/services/user";
import { onHide } from "@dcloudio/uni-app";

import Verify from "@/pages/components/verify/verify.vue";

const current = ref(0);
//轮播图
const indicatorDots = ref(false);
const autoplay = ref(true);
const interval = ref(5000);
const duration = ref(500);
const ablum = ref(null);
const projectdet = ref(null);
const store = ref({});
const order = ref(null);
const dictorderpay = ref([]);
const urlnum = ref(0);
posterfun();

async function posterfun() {
  uni.showLoading({
    title: "海报生成中...",
  });
  let res = await poster();
  dictorderpay.value = res.data;
  //   urlnum.value=
}

const changefun = (event) => {
  current.value = event.detail.current;
};
const numorder = (num) => {
  return num < 10 ? "0" + num : num;
};

const showmycode = () => {
  uni.navigateTo({
    url: "/pages/promotion-code/Index",
  });
};

const onImageLoad = (event) => {
  uni.hideLoading;
  // 在这里执行加载完成后的操作
};
onHide(() => {
  uni.hideLoading;
});

//显示验证组件
const sliderVerify = ref(null);
const sliderVerifyfun = () => {
  sliderVerify.value.show();
};
//验证通过回调
// const success = (e) => {
// };
const success = (data) => {
  sliderVerify.value.hide();
  // this.code(data);
};
//验证失败回调
const errorHandle = (e) => {};
//组件关闭回调
const closeHandle = (e) => {};
</script>

<template>
  <view class="content">
    <view class="image-num"
      >{{ numorder(current + 1) }}/{{ numorder(dictorderpay.length) }}</view
    >
    <view class="image-swiper">
      <swiper
        class="swiper"
        circular
        :current="current"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        @change="changefun"
      >
        <swiper-item v-for="(item, index) in dictorderpay" :key="index">
          <!--  -->
          <view class="swiper-item">
            <image :src="item.image" @load="onImageLoad"></image>
          </view>
        </swiper-item>
      </swiper>
      <view class="image-ts">如只需二维码，可访问二维码名片</view>

      <!-- <image src="" mode="widthFix" /> -->
      <view class="share-list">
        <!-- #ifdef MP -->

        <view class="share-list-item">
          <image src="../../static/share/icon_3.png" mode="scaleToFill" />
          <view>分享到微信</view>
        </view>
        <view class="share-list-item">
          <image src="../../static/share/icon_1.png" mode="scaleToFill" />
          <view>保存到相册</view>
        </view>
        <!-- #endif -->
        <view class="share-list-item" @click="showmycode">
          <image src="../../static/share/icon_2.png" mode="scaleToFill" />
          <view>二维码名片</view>
        </view>
      </view>
    </view>

    <button type="default" @click="sliderVerifyfun()">显示滑动验证</button>
    <!-- <zmm-slider-verify
      ref="sliderVerify"
      :showBottomSlider="true"
      @success="successHandle"
      @error="errorHandle"
      @close="closeHandle"
    ></zmm-slider-verify> -->
  </view>

  <Verify
    @success="success"
    :captchaType="'blockPuzzle'"
    :imgSize="{ width: '330px', height: '155px' }"
    ref="sliderVerify"
  ></Verify>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
